<template>
  <div class="box">
    <div class="process">
      <div class="cd_header">
        <div class="pa_drawer_toggl" @click="checkToggl()">
          <i
            class="el-icon-arrow-up colorBlue"
            :class="toggl ? 'z_up' : 'z_down'"
          ></i>
        </div>
        <div class="tabset_border">
          <ul>
            <li
              class="tabsnav"
              :class="index == currentIndex ? 'is-active' : ''"
              v-for="(item, index) in stages"
              :key="index"
              @click="checktab(index)"
            >
              <i class="el-icon-check"></i>
              <label class="starName">{{ item.name }}</label>
              <!-- <label class="endName">项目立项</label> -->
            </li>
          </ul>
          <div class="currentStage">
            <span>将阶段标记为完成</span>
            <!-- <span>标记为当前阶段</span> -->
          </div>
        </div>
      </div>
      <el-collapse-transition>
        <div class="tabCon" v-if="toggl">
          <gqtzTab1 v-if="currentIndex == 0"></gqtzTab1>
          <gqtzTab2 v-if="currentIndex == 1"></gqtzTab2>
          <gqtzTab3 v-if="currentIndex == 2"></gqtzTab3>
          <gqtzTab4 v-if="currentIndex == 3"></gqtzTab4>
          <gqtzTab5 v-if="currentIndex == 4"></gqtzTab5>
          <gqtzTab6 v-if="currentIndex == 5"></gqtzTab6>
        </div>
      </el-collapse-transition>
    </div>
  </div>
</template>
<script>
import gqtzTab1 from "@/components/bigView/gqtz/gqtzTab1.vue";
import gqtzTab2 from "@/components/bigView/gqtz/gqtzTab2.vue";
import gqtzTab3 from "@/components/bigView/gqtz/gqtzTab3.vue";
import gqtzTab4 from "@/components/bigView/gqtz/gqtzTab4.vue";
import gqtzTab5 from "@/components/bigView/gqtz/gqtzTab5.vue";
import gqtzTab6 from "@/components/bigView/gqtz/gqtzTab6.vue";
export default {
  components: {
    gqtzTab1,
    gqtzTab2,
    gqtzTab3,
    gqtzTab4,
    gqtzTab5,
    gqtzTab6,
  },
  data() {
    return {
      stages: [
        {
          index: 0,
          show: false,
          name: "项目立项",
          state: 1,
          endName: "通过立项",
        },
        {
          index: 1,
          show: false,
          name: "尽调评估",
          state: 0,
          endName: "通过尽调",
        },
        {
          index: 2,
          show: false,
          name: "预审/投决",
          state: 0,
          endName: "通过投决",
        },
        {
          index: 3,
          show: false,
          name: "投资实施",
          state: 0,
          endName: "实施完成",
        },
        {
          index: 4,
          show: false,
          name: "投后管理",
          state: 0,
          endName: "投后管理",
        },
        {
          index: 5,
          show: false,
          name: "退出",
          state: 0,
          endName: "退出",
        },
      ],
      currentIndex: 0,
      toggl: true,
    };
  },
  methods: {
    checktab(index) {
      this.currentIndex = index;
    },
    checkToggl() {
      this.toggl = !this.toggl;
    },
  },
};
</script>
<style lang="scss" >
.process {
  position: relative;
  .currentStage {
    right: 10px;
    top: 10px;
    border-radius: 16px;
    background-color: rgb(0, 112, 210);
    width: 20%;
    height: 32px;
    display: inline-block;
    text-align: center;
    line-height: 32px;
    cursor: pointer;
    color: #fff;
  }
  .colorBlue {
    transition: all 0.3s ease-in 0.1s;
  }
  .z_up {
    transform: rotate(0deg);
  }
  .z_down {
    transform: rotate(180deg);
  }
  .tabCon {
    margin-top: 20px;
  }
}
</style>